<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useOrderStore } from '@/stores';

const orders = ref<any>([]);
const order = ref<any>({});
const orderStore = useOrderStore();
const popupVisible = ref(false);
const search = ref<any>({});
const orderTypes = ref<any>([
	{
		key: '0',
		title: '全部'
	},
	{
		key: '1',
		title: '待付款'
	},
	{
		key: '2',
		title: '待使用'
	},
	{
		key: '3',
		title: '已完成'
	}
]);

onLoad(() => {
	fetchData();
});

async function fetchData() {
	orders.value = await orderStore.getOrders({ ...search.value });
}

function toOrderConfirm() {
	uni.navigateTo({
		url: '/pages/order-confirm/order-confirm'
	});
}

function handleViewVerificationCode(item: any) {
	order.value = item;
	popupVisible.value = true;
}

function handleTabsChange(value: any) {
	if (value === '0') {
		delete search.value.statusValue;
	} else {
		search.value.statusValue = value;
	}
	fetchData();
}
</script>

<template>
	<x-container direction="vertical" bg-color="#fff" padding="32rpx 32rpx 0">
		<dlk-search placeholder="搜索订单号"></dlk-search>
		<x-tabs :items="orderTypes" default-active-key="0" @change="handleTabsChange"></x-tabs>
	</x-container>
	<x-container direction="vertical" bg-color="#F8F8F8" min-height="100vh" padding="32rpx" gap="20rpx">
		<x-card v-for="order in orders" v-if="orders.length > 0">
			<x-container justify="between" align="center">
				<x-text-icon direction="horizontal" type="store" :size="28" :text-props="{ size: 28 }">{{ order.merchant.name }}</x-text-icon>
				<x-text color="#999999" :size="24">待使用</x-text>
			</x-container>
			<x-divider></x-divider>
			<x-space direction="vertical" :size="20">
				<x-row v-for="product in order.products">
					<x-col flex="180rpx">
						<x-image width="160rpx" height="160rpx" :src="product.cover?.url" :radius="8"></x-image>
					</x-col>
					<x-col flex="auto">
						<x-container direction="vertical" justify="between" height="100%">
							<x-space direction="vertical" align="start" :size="10">
								<x-text color="#222222" :size="26" :line-height="36" bold>{{ product.productName }}</x-text>
							</x-space>
							<x-container justify="between" align="end" width="100%">
								<!-- <x-text color="#999999" :size="26"></x-text> -->
								<x-tag outline>免预约</x-tag>
								<dlk-currency :value="399.0" :size="36"></dlk-currency>
							</x-container>
						</x-container>
					</x-col>
				</x-row>
			</x-space>
			<x-divider></x-divider>
			<x-container justify="end" gap="20rpx">
				<x-button type="primary" shape="round" @tap="handleViewVerificationCode(order)" outline>查看券码</x-button>
				<x-button type="primary" shape="round" @tap="toOrderConfirm">继续支付</x-button>
			</x-container>
		</x-card>
		<x-container justify="center" padding="100rpx" v-else>
			<x-empty></x-empty>
		</x-container>
	</x-container>
	<x-popup :visible="popupVisible" position="center" @cancel="popupVisible = false">
		<x-container direction="vertical" align="center" gap="32rpx">
			<x-text :size="32" bold>核销码</x-text>
			<x-container radius="14rpx" padding="24rpx" bg-color="linear-gradient( 180deg, #E7EFFF 0%, #F5F9FC 100%)">
				<x-image width="300rpx" height="300rpx"></x-image>
			</x-container>
			<x-space :size="0">
				<x-text color="#666666" :size="28">核销码：</x-text>
				<x-text :size="28">{{ order.verificationCode }}</x-text>
			</x-space>
			<x-space direction="vertical" :size="0" align="center">
				<x-text color="#666666" :size="24" :line-height="36">为保障您的权益</x-text>
				<x-text color="#666666" :size="24" :line-height="36">未到店铺消费前请不要将核销码提供给商家</x-text>
			</x-space>
		</x-container>
	</x-popup>
</template>
